<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 页面加websocket
            websocketClient();
        });
        let sock;

        function websocketClient() {
            console.log(window.location.host)
            const url = 'ws://' + window.location.host + "/websocket" ;
            sock = new WebSocket(url);

            // 打开连接，打开连接后的回调
            sock.onopen = function () {
                console.log("连接打开");

            };

            // 客户端发送消息给服务器，回调
            sock.onmessage = function(data)
            {
                console.info(data);
                console.info(data.data);
            };

            sock.onclose = function() {
                console.info("close");
            };

        }
        // 测试客户端与服务器通讯
        function sendMessage() {
            let val = $("#msg").val();
            sock.send(val);
        }


    </script>
</head>
<body>
    <div>
        <h3>欢迎：<label style="color: blueviolet;font-family: 楷体,serif" th:text="${user.username}"></label>进入</h3>
    </div>
    <div style="width: 200px;line-height: normal;background-color: antiquewhite">
    </div>
    <label for="msg">消息：</label>
    <input type="text" name="msg" id="msg" value="">
    <input type="button" value="发送" onclick="sendMessage();">
</body>
<script>
    $(function () {

    })
</script>
</html>
